<template>
	<view class="custom">
	      <view class="custom-content d-flex a-center j-center">
				<view class="content-card d-flex d-r a-center j-center">
					<image style="width: 26rpx;height: 32rpx;" src="/static/image/red-envelope.png" />
					<!--
					<text class="card-text">完成了</text>
					-->
					<!--自己领取的-->
					<template v-if="userData.id == message.userId && userData.id == message.sendUserId">
						<text class="card-text">你领取了自己发的</text>
					</template>  
					<template v-else>
						<!--红包发送者-->
						<text v-if="userData.id == message.sendUserId" class="card-text">{{nickName(message?.userId)}}领取了你的</text>
						<!--红包领取者-->
						<text v-if="userData.id == message.userId" class="card-text">你领取了{{nickName(message?.sendUserId)}}的</text>
					</template>
					<text @tap="goRedDetails" class="card-uline">红包</text>
					<!--自己领取的-->
					<text v-if="message.note == 'A-END' && conversationType == 'GROUP'" class="card-text">，你的红包已被领完</text>
				</view>
	      </view>
	</view>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs, computed } from 'vue';
import { userData as userDataStore } from "@/store/userData";
import { imStore } from "@/store/imStore";

const userData: any = userDataStore();
const MessageRedRob = defineComponent({
	props: {
		data: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	setup(props:any, ctx:any) {
		const IM_STORE = imStore();
		const data = reactive({
			message: {} as any,
			userData: {} as any,
			
		});
		watchEffect(()=>{
			data.message = props.data;
			data.userData = userData;
			//console.log(data.message)
		});
		//获取备注名称
		let nameCard:any = null
		const nickName = (userId:string) => {
			let friendInfo:any = IM_STORE.friends.find((item:any) => item.userID === userId);
			if(friendInfo){
				if(friendInfo.remark) {
					return friendInfo.remark
				}
			}
			let type  = IM_STORE?.conversation?.type;
			if (type === "GROUP") {
				if(nameCard == null){
					let userData:any = IM_STORE.groupMembers.find((item:any) => item.userID === userId);
					if(userData){
						if(userData.nameCard){
							nameCard =  userData.nameCard
						}
					}
				}
				if(nameCard)return nameCard
			}
			return friendInfo?.profile?.nick
		};
		const conversationType = computed(() => {
			return IM_STORE?.conversation?.type;
		})
		//显示红包详情页面
		const goRedDetails = () =>{
			uni.navigateTo({
				url: `/pages/redDetails/redDetails?redId=${data.message.redId}`
			});
		}
		return {
			...toRefs(data),
			nickName,
			goRedDetails,
			conversationType
		};
	}
});
export default MessageRedRob
</script>

<style lang="scss" scoped>

.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}

.custom {
    .custom-content{
        width:750rpx;
        .content-card{
            padding:0 30rpx;
            border-radius: 25rpx;
            height:50rpx;
			.card-text{
				padding-left: 10rpx;
				font-size: 24rpx;
				color: #666;
				font-weight: 400;
            }
			.card-uline{
				font-size: 24rpx;
				color: #FF7840;
				font-weight: 400;
			}

        }
    }

}
</style>